每個APP最基本都會運用到 TabBar
+NavigationBar
外送平台也不例外 基本上底層架構都差不多
上下的Bar 有時有 有時隱藏的運用
為了必免全都寫在AppDelegate
太過雜亂
我們這邊分為更細 TabBarController
+TabBar
+NavigationController
然後再給AppDelegate
做呼叫
這樣應該整理的不錯
麻煩先把TabBarController
+TabBar
+NavigationController
三個class先建立好
名稱可以取自己要的
宣告剛剛建立好的TabBarController
並且讓rootViewController
等於TabBarController
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
let tabBarController = JGTabBarController()
self.window?.rootViewController = tabBarController
return true
}
UITabBar 在設置backgroundColor
如果直接使用self.backgroundColor
這個變數
得出的顏色與設定的有所不同
後面使用self.backgroundImage
顏色才恢復正常
self.backgroundColor = UIColor(displayP3Red: 0.1, green: 0.4, blue: 0.9, alpha: 0.8)
呈現圖
let transperentBlackColor = UIColor(displayP3Red: 0.1, green: 0.4, blue: 0.9, alpha: 0.8)
let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
transperentBlackColor.setFill()
UIRectFill(rect)
if let image = UIGraphicsGetImageFromCurrentImageContext() {
self.backgroundImage = image
}
UIGraphicsEndImageContext()
呈現圖
self.backgroundColor
上面會有一層透明白色蓋在上面
應該是有其他變數要設定或是物件需要隱藏
這下次有時間再回來處理這個
如果想讓TabBar豐富點
特效多一點 或是有其他點擊事件
特殊處理
可以在'UITabBar
裡的layoutSubviews
做控制
譬如讓點擊時Button
會微微跳動
讓APP更生動 添加觸擊回饋讓使用者體驗更好
控制每一個Button
新增點擊事件
override func layoutSubviews() {
super.layoutSubviews()
var tabBarBtnIndex = 0;
for subView in self.subviews {
if let navButtonClass = NSClassFromString("UITabBarButton") {
if subView.isKind(of: navButtonClass) {
tabBarBtnIndex += 1
print(tabBarBtnIndex)
let tabBarBtn = subView as? UIControl
tabBarBtn!.addTarget(self, action: #selector(buttonClicked(tabBarButton:)), for: UIControl.Event.touchUpInside)
}
}
}
}
當點擊Button
觸發touchUpInside
所觸擊的Button
會隨著我們所設定duration
時間內
實現放大縮小特效
特效得呈現由animation.values
控制
塞入越多質 按鈕就會像彈簧一樣在duration
時間內變化
@IBAction func buttonClicked(tabBarButton: UIControl) {
for imageView in tabBarButton.subviews {
if let navButtonClass = NSClassFromString("UITabBarSwappableImageView") {
if imageView.isKind(of: navButtonClass) {
let animation = CAKeyframeAnimation(keyPath: "transform.scale")
animation.values = [1.0,1.15,1.0];
animation.duration = 0.2;
animation.calculationMode = CAAnimationCalculationMode.cubic;
imageView.layer.add(animation, forKey: nil)
}
}
}
}
Demo